<template>
  <div>
    <div
      class="page-title"
      :style="{
        height: height + 'px',
        '--label': `'${title}'`,
      }"
    >
      <img src="@/assets/home/screen-logo.png" draggable="false" />
      <div class="label">{{ title }}</div>
      <Time-func :full-srceen="fullSrceen" />
    </div>
    <div v-if="back" class="btn-back f f-ai-c f-jc-c" @click="handleBack">返回</div>
  </div>
</template>
<script>
export default {
  props: {
    // 标题
    title: {
      type: String,
      default: "威士凯数智化中心",
    },
    // 高度
    height: {
      type: [Number, String],
      default: 106,
    },
    // 显示返回
    back: {
      type: Boolean,
      default: false,
    },
    // 刷新频率 单位秒 默认0不刷新
    interval: {
      type: [Number, String],
      default: 0,
    },
    // 全屏按钮
    fullSrceen: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      intervalTimer: null, // 刷新定时器
    };
  },
  created() {
    this.setRefresh();
  },
  methods: {
    // 设置更新频率
    setRefresh() {
      if (this.interval == 0) return;
      this.intervalTimer = setInterval(() => {
        this.$store.dispatch("app/setRefresh", Number(new Date()));
      }, (typeof this.interval == "string" ? Number(this.interval) : this.interval) * 1000);
    },
    // 返回
    handleBack() {
      this.$router.go(-1);
    },
  },
  destroyed() {
    if (this.intervalTimer) {
      clearInterval(this.intervalTimer);
      this.intervalTimer = null;
    }
  },
};
</script>
<style lang="scss" scoped>
.page-title {
  width: 1920px;
  height: 106px;
  background: url("~@/assets/home/screen-title.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  position: relative;
  --label: "";
  position: relative;
  z-index: 0;
  img {
    position: absolute;
    left: 20px;
    top: 24px;
    width: 282px;
    height: 44px;
  }
  .label {
    font-family: YouSheiBlack;
    font-size: 50px;
    margin-top: 10px;
    color: transparent;
    background: linear-gradient(#fff, #8595a6);
    -webkit-background-clip: text;
    background-clip: text;
    &::before {
      content: var(--label);
      position: absolute;
      z-index: -1;
      text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.8);
    }
  }
}
.btn-back {
  width: 135px;
  height: 36px;
  text-align: center;
  margin-left: 20px;
  color: #fff;
  background: url("~@/assets/home/srceen_back.png") no-repeat;
  background-size: 100% 100%;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: bold;
  font-size: 16px;
  color: #45f4ff;
  text-shadow: 0px 3px 7px rgba(69, 244, 255, 0.5);
  &:hover {
    cursor: pointer;
    opacity: 0.8;
  }
}
</style>
